<template>
	<div style="display: flex; justify-content: center;margin-top: 20px;">
		<el-card class="box-card">
			<el-descriptions title="预约信息" v-if="order">
				<template slot="extra">
					<el-button type="warning" size="small" @click="cancel()">取消预约</el-button>
				</template>
				<el-descriptions-item label="用户名">{{order.user.nickname}}</el-descriptions-item>
				<el-descriptions-item label="手机号">{{order.user.phone}}</el-descriptions-item>
				、<el-descriptions-item label="座位号">{{order.seat.seatNum}}</el-descriptions-item>
				<el-descriptions-item label="楼层">{{order.seat.floor}}楼</el-descriptions-item>
				<el-descriptions-item label="状态">
					<el-tag type="warning">预约中</el-tag>
				</el-descriptions-item>
			</el-descriptions>

			<div style="height: 1px; background-color: #e0e0e0; margin: 10px 0;" v-if="tableData.length>0 && order!=null"></div>
			<div>
				<div><span>预约记录</span></div>
				<div class="box-card">
					<div v-if="tableData.length>0">
						<div>
							<el-table :data="tableData" style="width: 100%" max-height="250">
								<el-table-column fixed prop="createTime" label="预约日期" width="100">
								</el-table-column>
								<el-table-column prop="user" label="姓名">
									<template slot-scope="scope">
										<span>{{scope.row.user.nickname}}</span>
									</template>
								</el-table-column>
								<el-table-column prop="seat" label="座位号">
									<template slot-scope="scope">
										<span>{{scope.row.seat.seatNum}}</span>
									</template>
								</el-table-column>
								<el-table-column prop="city" label="楼层">
									<template slot-scope="scope">
										<span>{{scope.row.seat.floor}}楼</span>
									</template>
								</el-table-column>
								<el-table-column fixed="right" label="操作" width="100">
									<template slot-scope="scope">
										<el-button @click.native.prevent="deleteRow(scope.$index, tableData)"
											type="text" size="small">
											移除
										</el-button>
									</template>
								</el-table-column>
							</el-table>
						</div>
						<div style="padding: 10px 0">
							<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
								:current-page="pageNum" :page-sizes="[2, 5, 10, 20]" :page-size="pageSize"
								layout="total, sizes, prev, pager, next, jumper" :total="total">
							</el-pagination>
						</div>
					</div>
					<div v-else>
						<el-empty description="暂无预约信息"></el-empty>
					</div>
				</div>

			</div>
		</el-card>
	</div>
</template>
<script>
	export default {
		name: "MyOrder",
		data() {
			return {
				order: {},
				total: 0,
				pageNum: 1,
				pageSize: 10,
				tableData: []
			}
		},
		created() {
			this.load()
			this.getOne()
		},
		methods: {
			deleteRow(index, rows) {
				this.$confirm("确定移除吗？", "提示", {
					type: 'info'
				}).then(() => {
					this.request.delete('/delete').then(res => {
						if (res.code == '200') {
							rows.splice(index, 1);
						}
					})
				}).catch(() => {
					this.$message.info("取消操作")
				})
			},
			handleSizeChange(pageSize) {
				this.pageSize = pageSize
				this.load()
			},
			handleCurrentChange(pageNum) {
				this.pageNum = pageNum
				this.load()
			},
			load() {
				this.request.get("/notice").then(res => {
					this.notices = res?.data
				})
				this.request.get("/order/page", {
					params: {
						pageNum: this.pageNum,
						pageSize: this.pageSize,
						name: this.name,
					}
				}).then(res => {
					this.tableData = res.data.records
					this.total = res.data.total
					console.log(res.data)
				})
			},


			cancel() {
				this.$confirm("确定取消吗？", "提示", {
					type: 'info'
				}).then(() => {
					this.request.get("/seat/cancel/" + this.order.seat.id).then(res => {
						if (res.code === '200') {
							this.load()
							this.getOne()
							this.$message.success("取消预约成功")
						} else {
							this.$message.warning(res.msg)
						}
					})
				}).catch(() => {
					this.$message.info("取消操作")
				})
			},
			getOne() {
				this.request.get("/order/getOne").then(res => {
					if (res.code === '200') {
						this.order = res.data
					} else {
						this.$message.warning(res.msg)
					}
				})
			}
		},
	}
</script>

<style scoped>
	.text {
		font-size: 18px;
	}

	.item {
		padding: 18px 0;
	}

	.box-card {
		width: 800px;
	}
</style>